<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>修改商品信息</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css"/>
	<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="../js/javascript.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/httpVueLoader.js"></script>
	<script type="text/javascript" src="../js/index.js"></script>
	<script type="text/javascript" src="../js/node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="productUpdateApp">
	<top-manage></top-manage>
	<div id="middle">
		<div id="position">
			您现在的位置是&nbsp;&gt;&nbsp;<a href="index-manage.html">管理后台</a>&nbsp;&gt;&nbsp;商品管理
		</div>
		<product-manage></product-manage>
		<div id="main">
			<div id="register">
				<h1>修改商品信息</h1>
				<table>
					<tr>
						<td align="right" style="width:80px;">商品名称：</td>
						<td style="width:270px;"><input type="text" size="30" placeholder="请输入商品名称" v-model="product.name"/></td>
						<td></td>
					</tr>
					<tr>
						<td>商品图片：</td>
						<td><input type="file"/></td>
						<td></td>
					</tr>
					<tr>
						<td>商品描述：</td>
						<td><input type="text" size="30" placeholder="请输入商品描述" v-model="product.desc"/></td>
						<td></td>
					</tr>
					<tr>
						<td>商品价格：</td>
						<td><input type="text" size="30" placeholder="请输入商品价格" v-model="product.price"/></td>
						<td></td>
					</tr>
					<tr>
						<td>商品库存：</td>
						<td><input type="text" size="30" placeholder="请输入商品库存" v-model="product.stock"/></td>
						<td></td>
					</tr>
					<tr>
						<td>商品类别：</td>
						<td>
							<select v-model="product.category.id">
								<option v-for="(category,index) in categoryList" :value="category.cid" v-text="category.cname"/>
							</select>
						</td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td><input type="submit" value="确认修改" class="button" @click="updateProduct()"/></td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<bottom></bottom>
</div>
<script type="text/javascript">
	Vue.use(httpVueLoader);
	const app = new Vue({
		el: "#productUpdateApp",
		data: {
			id: 1,
			product:{
				id: "",
				name: "",
				picture: "",
				desc: "",
				price: "",
				stock: "",
				date: "",
				sales: "",
				category: {},
				categoryStr: "",
			},
			categoryList: [],
		},
		created() {
			this.product.id = this.id;
			this.loadData();
		},
		methods: {
			loadData() {
				axios.get("/product/" + this.id).then(resp => {
					this.product = resp.data;
				});
				axios.get("/category").then(resp => {
					this.categoryList = resp.data;
				});
			},
			updateProduct() {
				axios.put("/product",this.product).then(resp => {
					location.href="./product-list.html";
				});
			}
		},
		components: {
			'top-manage': 'url:../common/top-manage.vue',
			'bottom': 'url:../common/bottom.vue',
			'product-manage': 'url:../common/product-manage.vue',
		},
	});
</script>
</body>
</html>